<template>
  <view>
    <uni-grid :column="5" :show-border="false" :square="false">
      <uni-grid-item v-for="(item ,index) in list" :key="index" :index="index">
        <view class="grid-item-box" @click="click(item.to)">
          <image class="image" :src="item.url" mode="aspectFill" />
          <text class="text">{{ item.text }}</text>
          <view v-if="item.badge" class="grid-dot">
            <uni-badge :text="item.badge" :type="item.type" />
          </view>
        </view>
      </uni-grid-item>
    </uni-grid>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          url: '/static/index/gridbar/service.png',
          text: '校园服务',
          type: 'primary',
          to: 'campus'
        },
        {
          url: '/static/index/gridbar/educational.png',
          text: '教务系统',
          type: 'primary',
          to: 'educationals'
        }, 
        {
          url: '/static/index/gridbar/collect.png',
          text: '悬赏问答',
          type: 'primary',
          to: 'questions/questionList'
        },
        {
          url: '/static/index/gridbar/talk.png',
          text: '吐槽交流',
          type: 'primary',
          to: 'article/articleList'
        },
        {
          url: '/static/index/gridbar/idle.png',
          text: '闲置交易',
          type: 'primary'
        },
        {
          url: '/static/index/gridbar/recreation.png',
          text: '校园活动',
          // badge: '0',
          type: 'primary',
          toApp: '优学派'
        },
        {
          url: '/static/index/gridbar/love.png',
          text: '恋爱交友',
          type: 'primary'
        },
        {
          url: '/static/index/gridbar/wish.png',
          text: '快递收寄',
          type: 'primary'
        }, 
        {
          url: '/static/index/gridbar/lost.png',
          text: '失物招领',
          type: 'primary'
        },
       
        {
          url: '/static/index/gridbar/more.png',
          text: '更多服务',
          type: 'primary'
        }]
    }
  },
  methods: {
    click(to) {
      if (typeof (to) !== 'undefined') {
        uni.navigateTo({
          url: '/pages/' + to + '/index'
        })
      } else {
        uni.showToast({
          title: '该功能尚在开发中...',
          icon: 'none'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
	.image {
		width: 40px;
		height: 40px;
	}

	.text {
		font-size: 12px;
		margin-top: 8px;
		color: black;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		// display: block;
		/* #endif */
	}

	.grid-dynamic-box {
		margin-bottom: 15px;
	}

	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-item-box-row {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-dot {
		position: absolute;
		top: 5px;
		right: 10px;
	}

	.swiper {
		height: 420px;
	}

	/* #ifdef H5 */
	@media screen and (min-width: 768px) and (max-width: 1425px) {
		.swiper {
			height: 630px;
		}
	}

	@media screen and (min-width: 1425px) {
		.swiper {
			height: 830px;
		}
	}

	/* #endif */
</style>

